<template>
	<view class="modify-page">
		<c-layout>
			<c-navigation-bar slot="head" :title="$t('storeManagement.orderManagement')">
			</c-navigation-bar>
			<view class="tab-container">
				<u-tabs :list="navList" :current="init" @change="tabsChange"></u-tabs>
			</view>
			<scroll-view class="productBoxAll" scroll-y="true" @scrolltolower="refreshList" scroll-top="120">
				<u-checkbox v-if="init==2" v-model="isAllchecked"
					@change="isAllcheck">{{$t('storeManagement.Select_All')}}</u-checkbox>
				<u-checkbox-group v-model="checkboxValue1" style="width: 100%;" @change="checkboxGroupChange" v-if="init==2">
					<u-checkbox @change="isCheck(item)" style="width: 100%;" v-model="item.checked"
						v-for="(item, index) in orderList" :key="index" :name="item.id">
						<view class="productBox" style="width: 100%;" @click.stop="goDetail(item.orderId)">
							<view class="msg-box">
								<view class="left-box">{{$t('storeManagement.orderNumber')}}:</view>
								<view class="right-box">{{item.orderNo}}</view>
							</view>
							<view class="msg-box">
								<view class="left-box">{{$t('storeManagement.productName')}}:</view>
								<view class="right-box">{{item.names}}</view>
							</view>
							<view class="msg-box">
								<view class="left-box">{{$t('anchorConsole.date')}}:</view>

								{{publicJS.timeZoneSwitching(Number(item.createTime))}}

							</view>
							<view class="msg-box">
								<view class="left-box ">{{$t('storeManagement.orderStatus')}}:</view>
								<view class="right-box status-box">{{item.goodStatus}}</view>
							</view>
						</view>
					</u-checkbox>
				</u-checkbox-group>

				<view v-else class="allBox" v-for="(item,index) in orderList" :key="item.id">
					<view class="productBox" @click.stop="goDetail(item.orderId)">
						<view class="msg-box">
							<view class="left-box">{{$t('storeManagement.orderNumber')}}:</view>
							<view class="right-box">{{item.orderNo}}</view>
						</view>
						<view class="msg-box">
							<view class="left-box">{{$t('storeManagement.productName')}}:</view>
							<view class="right-box">{{item.names}}</view>
						</view>
						<view class="msg-box">
							<view class="left-box">{{$t('anchorConsole.date')}}:</view>
							{{publicJS.timeZoneSwitching(Number(item.createTime))}}
						</view>
						<view class="msg-box">
							<view class="left-box ">{{$t('storeManagement.orderStatus')}}:</view>
							<view class="right-box status-box">{{item.goodStatus}}</view>
						</view>
					</view>
				</view>
				<view ref="loadMoreView"></view>
				<view>
					<u-toast ref="uToast" />
				</view>
				<!-- </view> -->
			</scroll-view>
			<u-button :loading="isloading" v-if="init==2" style="position: fixed;bottom: 20rpx;width: 88%;" type="primary"
				@click="handleSend">{{$t('storeManagement.send_out_goods')}}</u-button>
		</c-layout>
		<modal :show='isshow' :content='msg' @confirmClick='confirmClick' @cancelClick='cancelClick'>
		</modal>
		<inputPayPassword @finish="finish" :payPwdPopShow.sync="showPassWorld" :title="pswTitle" :amount="amountInput"
			:maxlength="6" @close="cancel"></inputPayPassword>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pswTitle: '补缴货款',
				amountInput: '',
				earnestMoney: '',
				showPassWorld: false,
				isshow: false,
				isloading: false,
				checkboxValue1: [],
				isAllchecked: false,
				navList: [{
						name: this.$t('orderDetails.allOrder')
					},
					{
						name: this.$t('orderDetails.Delivered')
					},
					{
						name: this.$t('orderDetails.UnShipped')
					},
					{
						name: this.$t('orderDetails.Shipped')
					},
					{
						name: this.$t('orderDetails.Unpaid')
					},
					{
						name: this.$t('orderDetails.canceled')
					},
				],
				init: 0,
				current: 1,
				orderList: [],
				msg: '',
			}
		},
		onLoad() {
			this.getList1(0)
			this.$u.get('/app/shop/getPayableEarnestMoney').then(res => {
				this.earnestMoney = res.data

			})
		},
		methods: {
			finish(e) {
				this.$u.post(`/app/user/check/bank/password?password=${e}`).then((res) => {
						this.$u.post(`/app/shopOrderInfo/payCost`, {
							orderIds: this.checkboxValue1
						}).then((res) => {
						
							this.isloading = true
							let List = []
							this.orderList.forEach(item => {
								List = [
									...List,
									item.id
								]
							})
							this.$u.post('/app/shopOrderInfo/shipped', { orderIds: this.checkboxValue1 }).then(res => {
								if (res.code == 200) {
									this.isloading = false
									for (let b = this.checkboxValue1.length; b >= 0; b--) {
										let idx = List.indexOf(this.checkboxValue1[b])
										if (List.indexOf(this.checkboxValue1[b]) != -1) {
											console.log(idx)
											this.orderList.splice(idx, 1)
											if (this.orderList.length == 0) {
												this.isAllchecked = false
											}
										}
									}
									this.$u.toast(this.$t('orderDetails.Shipment_successful'))
									this.checkboxValue1 = {}
									this.showPassWorld = false
									this.isloading = false
									this.getList1(2, 1)
								} else {
						
									this.$u.toast(this.$t('orderDetails.Shipment_failed'))
								}
							})
						
						});
					}
					// ,(err)=>{
					// 	this.showToast(this.$t('orderDetails.notCorrectly'))
					// }
				);
			
			},
			cancel() {
				close()
				this.isloading = false
			},
			confirmClick() {
				if (this.amountInput > this.shopBalance) {
					if (this.amountInput <= this.earnestMoney) {
						this.isshow = false
						this.$u.toast(this.$t('recharge.StoreBalanceError_1'))
						setTimeout(() => {
							this.showPassWorld = true
						}, 1000)
						return
					}
					this.$u.toast(this.$t('recharge.StoreBalanceError'))
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/storyType/storeManagement/withdrawal?type=0&rechargeType=1',
							"animationType": "slide-in-right",
							"animationDuration": 300
						})
					}, 1000)
					return
				}
				this.isshow = false
				this.showPassWorld = true
			},
			cancelClick() {
				this.isloading = false
				this.isshow = false
			},
			//发货
			handleSend() {
				if (this.checkboxValue1.length) {
					this.isloading = true
					let List = []
					this.orderList.forEach(item => {
						List = [
							...List,
							item.id
						]
					})
					this.$u.post('/app/shopOrderInfo/getWaitPayCost', { orderIds: this.checkboxValue1 }).then(res => {
						if (res.data.cost == 0) {
							this.$u.post('/app/shopOrderInfo/shipped', { orderIds: this.checkboxValue1 }).then(res => {
								if (res.code == 200) {
									this.isloading = false
									for (let b = this.checkboxValue1.length; b >= 0; b--) {
										let idx = List.indexOf(this.checkboxValue1[b])
										if (List.indexOf(this.checkboxValue1[b]) != -1) {
											console.log(idx)
											this.orderList.splice(idx, 1)
											if (this.orderList.length == 0) {
												this.isAllchecked = false
											}
										}
									}
									this.$u.toast(this.$t('orderDetails.Shipment_successful'))
									this.checkboxValue1 = {}
								} else {

									this.$u.toast(this.$t('orderDetails.Shipment_failed'))
								}
							})
						} else {
							this.amountInput = res.data.cost
							this.shopBalance = res.data.shopBalance
							this.msg = this.$t('storeManagement.pendingPayment') + '$' + res.data.cost.toFixed(2) + '，' + this.$t(
								'recharge.StoreBalance') + '$' + res.data.shopBalance + this.$t('storeManagement.upImmediately')
							this.isshow = true
						}
					})


				}
			},
			checkboxGroupChange(e) {
				this.checkboxValue1 = e
				console.log(e)
				if (e.length == this.orderList.length) {
					this.isAllchecked = true
				} else {
					this.isAllchecked = false
				}
			},
			isCheck(item) {
				if (item.checked != true) {
					this.checkboxValue1 = [
						...this.checkboxValue1,
						item.id
					]
				}
			},
			isAllcheck() {
				this.checkboxValue1 = []
				this.isAllchecked = !this.isAllchecked
				if (this.isAllchecked == true) {
					this.orderList.forEach(item => {
						this.checkboxValue1 = [
							...this.checkboxValue1,
							item.id
						]
					})
					this.orderList.map(item => {
						item.checked = true
					})
				} else {
					this.orderList.map(item => {
						this.checkboxValue1 = []
						item.checked = false
					})
				}
			},
			//上拉刷新
			refreshList() {
				const loadMoreView = this.$refs.loadMoreView.$el;
				// this.$emit('loading', this.getList());
				console.log(222);
				if (this.init == 0) {
					this.$emit('loading', this.getList1(0));
				} else if (this.init == 1) {
					this.$emit('loading', this.getList1(1));
				} else if (this.init == 2) {
					this.$emit('loading', this.getList1(2));
				} else if (this.init == 3) {
					this.$emit('loading', this.getList1(3));
				} else if (this.init == 4) {
					this.$emit('loading', this.getList1(4));
				} else if (this.init == 5) {
					this.$emit('loading', this.getList1(5));
				}
			},
			tabsChange(index) {
				this.isAllchecked = false
				this.init = index
				this.current = 1
				this.orderList = []
				this.getList1(index)
			},
			getList() {
				let data = {
					size: 100,
					current: this.current
				};
				this.$u.post('/app/shopOrderInfo/shopList', data).then(res => {
					if (res.code == 200) {
						const nextDataList = res.data.records; // 假设接口返回数据格式为 { data: [...] }
						if (nextDataList.length > 0) {
							this.orderList = this.orderList.concat(nextDataList);
							this.setStatus(this.orderList)
							this.current++;
						} else {
							uni.showToast({
								title: 'no more',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: 'err',
							icon: 'none'
						});
					}
				})

			},
			//加载更多
			loadMore(res, isUpdate = false) {
				if (res.code == 200) {
					const nextDataList = res.data.records; // 假设接口返回数据格式为 { data: [...] }
					if (nextDataList.length > 0) {
						this.orderList = this.orderList.concat(nextDataList);
						this.setStatus(this.orderList)
						this.current++;
					} else {
						if (!isUpdate) {
							uni.showToast({
								title: 'no more',
								icon: 'none'
							});
						}
					}
				} else {
					uni.showToast({
						title: 'err',
						icon: 'none'
					});
				}
			},
			//按条件筛选
			getList1(index, isUpdate = false) {
				if (index == 0) {
					this.$u.post('/app/shopOrderInfo/shopList', { size: 10, current: this.current }).then(res => {
						this.loadMore(res)
					})
				} else if (index == 1) {
					this.$u.post('/app/shopOrderInfo/shopList', { size: 10, current: this.current, orderStatus: 3 }).then(res => {
						this.loadMore(res)
					})
				} else if (index == 2) {
					this.$u.get('/app/shop/getPayableEarnestMoney').then(res => {
						if (res.data != 0) {
							this.$refs.uToast.show({
								title: this.$t('storeManagement.underMargin'),
								type: 'error',
								url: '/pages/storyType/storeManagement/storedeposit'
							})
						}
					})
					this.$u.post('/app/shopOrderInfo/shopList', { size: 100, current: this.current, orderStatus: 1 }).then(res => {
						this.loadMore(res, isUpdate)
					})
				} else if (index == 3) {
					this.$u.post('/app/shopOrderInfo/shopList', { size: 10, current: this.current, orderStatus: 2 }).then(res => {
						this.loadMore(res)
					})

				} else if (index == 4) {
					this.$u.post('/app/shopOrderInfo/shopList', { size: 10, current: this.current, orderStatus: 0 }).then(res => {
						this.loadMore(res)
					})
				} else if (index == 5) {
					this.$u.post('/app/shopOrderInfo/shopList', { size: 10, current: this.current, orderStatus: -1 }).then(res => {
						this.loadMore(res)
					})
				}
			},
			// 查看详情
			goDetail(id) {
				this.$u.get('/app/shopOrderInfo/shopOrder/' + id).then(res => {
					uni.navigateTo({
						url: '/pages/storyType/storeManagement/orderDetails?id=' + id
					})

				}).catch(err => {
					this.$u.toast(err.data.msg);

				})

			},
			setStatus(arr) {
				arr.forEach(item => {
					//is_delete 0 未取消 1取消
					//orderStatus 订单状态 0:未发货,1:已发货，2：确认收货
					//payStatus   支付状态 0:未支付,1已支付
					if (item.isDelete == 1) {
						this.$set(item, "goodStatus", this.$t('orderDetails.canceled'))
					} else {
						// if (Number(item.payStatus) == 0) {
						// 	this.$set(item, "goodStatus", this.$t('orderDetails.Unpaid'))
						// } else {
						if (item.orderStatus == 0) {
							this.$set(item, "goodStatus", this.$t('orderDetails.unpaid'))
						} else if (item.orderStatus == 1) {
							this.$set(item, "goodStatus", this.$t('orderDetails.UnShipped'))
						} else if (item.orderStatus == 2) {
							this.$set(item, "goodStatus", this.$t('orderDetails.Shipped'))
						} else if (item.orderStatus == 3) {
							this.$set(item, "goodStatus", this.$t('orderDetails.received'))
						} else if (item.orderStatus == -1) {
							this.$set(item, "goodStatus", this.$t('orderDetails.canceled'))
						} else if (item.orderStatus == 4 || item.orderStatus == 5) {
							this.$set(item, "goodStatus", this.$t('orderDetails.after_sale'))
						} else if (item.orderStatus == 6) {
							this.$set(item, "goodStatus", this.$t('orderDetails.after_sale_completion'))
						}
						// }
					}
				})
			},
			checkChange(index) {
				this.shelfList[index].ck = !this.shelfList[index].ck;

			},
			returns() {
				let arr = []
				this.shelfList.forEach((item) => {
					if (item.ck) {
						arr.push(item)
					}
				});
				if (arr.length == 0) {
					this.$u.toast('Please select product');
					return false
				}
				this.$u.post(`/shopReturnPurchase/add`, arr).then(r => {
					this.getList()
				})
			},

		},
		computed: {
			total() {
				let num = 0
				this.shelfList.forEach(item => {
					if (item.ck)
						num++
				})
				return num
			}
		},

		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {




		}
		// tabs通知swiper切换

	}
</script>

<style lang="scss" scoped>
	/deep/.c-navigation-bar {
		padding: 30rpx 0;
	}

	/deep/.uni-tooltip-popup {
		color: #c9c9c9;
		background: #f5f6f8;
		max-height: 400rpx;
		overflow: auto;
		width: 60%;
	}

	/deep/.uni-tooltip {
		width: 60%;
	}

	.modify-page {
		height: 100vh;
		padding: 0 44rpx;

		.tabs {

			height: 68rpx;
			background: rgba(0, 0, 0, 0.0287);
			border-radius: 34rpx 34rpx 34rpx 34rpx;
			opacity: 1;
			width: 539rpx;
			display: flex;
			align-items: center;
			margin: 58rpx auto;
			padding: 0 8rpx;

			.tabs_aside {
				width: 50%;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFangSC-Regular-Regular, PingFangSC-Regular;
				font-weight: 400;
				color: #A5A5A5;
				transition: transform .4s;

			}

			.active {
				background: #FFFFFF;
				box-shadow: 0rpx 10rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				height: 56rpx;
				line-height: 56rpx;
				color: #3B2BE4;
			}
		}

		.productBoxAll {
			// height: 80vh;
			height: calc(100vh - 380rpx);
			overflow: auto;

			/deep/ .u-checkbox {
				display: flex;

				.u-checkbox__label {
					flex: auto;
					width: 0;
				}
			}

			.productBox {
				// width: 120%;
				height: 266rpx;
				background: #FFFFFF;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				opacity: 1;
				border: 2rpx solid #E1E8E8;
				margin-bottom: 30rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				.msg-box {
					display: flex;
					justify-content: space-between;

					.left-box {
						color: #A8A8A8;
						font-size: 28rpx;
						width: 110px;
					}

					.right-box {
						text-align: end;
						width: 360rpx;
						font-size: 28rpx;
						color: #3B3B3B;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						-o-text-overflow: ellipsis;
					}

					.status-box {
						color: #2934D0;
					}
				}
			}

		}

		.purchase-bottom {
			display: flex;
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;

			justify-content: space-between;
			background-color: #1B1D29;
			padding: 32rpx 44rpx 52rpx 50rpx;

			.purchase-bottom {
				max-width: 200rpx;
				padding-left: 30rpx;
			}

			.text5 {
				color: #91909A;
				font-size: 28rpx;
			}

			.text6 {
				color: #91909A;
				font-size: 35rpx;
				font-weight: 400;

			}

			.custom-style {
				width: 280rpx;
				height: 100rpx;
				background: #2934D0;
				border-radius: 20rpx;
			}

		}

	}

	.tab-container {
		margin-bottom: 20rpx;
	}
</style>